import React,{Component} from "react";
import "./login.css"
import left from "../../assets/icon/左箭头.png"
import axios from "axios";

import {getLoginStatus} from "../../api/index"

import {withRouter} from "react-router-dom"
//获取当前的值
// import cookie from 'react-cookie'
class Login extends Component {
    constructor(){
        super()
        // this.state中定义value
        this.state={
            phone:"",
            password:""
        }
    }

    telephone(e){
        console.log(e)
        this.setState({//重新设值
            phone:e.target.value
        })
    };

    psw(e){
        this.setState({//重新设值
            password:e.target.value
        })
    }

    login(){
        var _this=this
        // console.log(this.state.phone,this.state.password)
         const url="/api/login/cellphone?phone="+this.state.phone+"&password="+this.state.password
         axios.get(url)//跨域请求
         .then(
             
            
             (res)=>{
                console.log(res)
                 if(res.data.code==200){
                     alert("登陆成功")
                    
                    //  console.log(res.data.account.id)
                    //  console.log(_this.props.history)
                     _this.props.history.push("/home/mine")
                    getLoginStatus().then(res=>{
                        console.log(res)
                    })
                 }
                 if(!window.localStorage){
                     console.log("浏览器不支持localStorage")
                     return false
                 }else{ //如果不存在，就存入本地
                     const storage = window.localStorage;
                     storage.uid=res.data.account.id
                 }

                //  this.props.history.push("/zhanghao?uid="+res.data.account.id)
             })  
           .catch(function(error){
               console.log(error)
           })
    }
    render(){
        console.log(this.state)
        return(
            <div className="login">
                <div className="login_top">
                    <img src ={left}/>
                    <b>手机号登录</b>
                </div>
                <div className="login_center">
                {/* 受控组件  有一个属性onChange */}
                    <input type="text" placeholder="手机号" className="phone" value={this.state.phone} onChange={this.telephone.bind(this)}/>
                    <input type="password" placeholder="密码" className="password" value={this.state.password} onChange={this.psw.bind(this)}/>
                </div>  
                <button className="btn" onClick={this.login.bind(this)}>登录</button>
                <span className="repassword">重设密码 ></span>             
            </div>
        )
    }
}

export default withRouter(Login)

// import React,{Component} from "react"
// import {withRouter} from "react-router-dom"
// import "./denglu.css"
// import { Button} from 'antd-mobile';
// import axios from "axios"
// class Denglu extends  Component{
//     constructor(){
//         super()
//         this.state={
//             iphone:'',
//             password:''
//         }
//     }
//     // 获取输入框手机号和密码
//     name(e){
//         this.setState({
//             iphone:e.target.value
//         })
//     }
//     pwd(e){
//         this.setState({
//             password:e.target.value
//         })
//     }
//     // 点击登录按钮触发的事件
//     login(){
//         console.log(this.state.iphone,this.state.password)
//         let url="api/login/cellphone?phone="+this.state.iphone+"&password="+this.state.password
//         axios.get(url)
//         .then( (res)=> {
//             if(res.data.code===200){
//                 alert("登录成功")
//                 console.log(res.data.account.id)
//                 // 将用户id存入localStorage
//                 if(!window.localStorage){
//                     alert("浏览器不支持localstorage");
//                     return false;
//                 }else{
//                     var storage=window.localStorage;
//                     storage.uid = res.data.account.id;
//                 }
//                 this.props.history.push("/zhanghao?uid="+res.data.account.id)
//             }
//         })
//         .catch(function (error) {
//             console.log(error);
//         })
//     }
//     render(){
        
//         return(
//             <div>
//                 <p className="title">手机号登录</p>
//                 <form className="formHome">
//                     <input type="text"  placeholder="手机号" value={this.state.iphone} className="phone" onChange={this.name.bind(this)}/ >
//                     <br/>
//                     <input type="password" placeholder="密码"   value={this.state.password} className="password" onChange={this.pwd.bind(this)}/>
//                     <Button type="warning" className="login" onClick={this.login.bind(this)}>登录</Button>
//                 </form>
//             </div>
//         )
//     }
// }
// export default withRouter(Denglu)